<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>圆弧选项组件</title>
		<style>
			:root {
				--primary-color: #4a6bff;
				--hover-color: #eee;
				--border-radius: 8px;
			}

			body {
				font-family: 'Segoe UI', sans-serif;
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				background: #f8f9fa;
				padding: 20px;
			}

			.option-container {
				width: 100%;
			}

			.option-item {
				position: relative;
				padding: 16px 24px;
				background: #e2e2e2;
				border-style: none;
				/* cursor: pointer; */
				/* border-top-left-radius: var(--border-radius);
				border-bottom-left-radius: var(--border-radius); */
				/* border-radius: var(--border-radius); */
				/* box-shadow: 0 2px 8px rgba(0,0,0,0.08); */

				/* transition: all 0.3s ease; */
				border-left: 4px solid transparent;
			}

			.option-item:hover {
				/* background: var(--hover-color); */
			}

			/* 选中状态 */
			.option-item.selected {
				background: white;
				border-left-color: var(--primary-color);
				/* box-shadow: 0 4px 12px rgba(0,0,0,0.12); */
			}

			/* 右侧圆弧 - 上部分 */
			.option-item.selected::before {
				content: '';
				position: absolute;
				right: -1px;
				top: -19px;
				width: 20px;
				height: 20px;
				background: radial-gradient(circle at 0 0,
						transparent 20px,
						white 21px);
				/* border-top-left-radius: 10px; */
				/* box-shadow: -10px 10px 0 10px white; */
				z-index: 1;
			}

			/* 右侧圆弧 - 下部分 */
			.option-item.selected::after {
				content: '';
				position: absolute;
				right: -1px;
				bottom: -19px;
				width: 20px;
				height: 20px;
				background: radial-gradient(circle at 0 100%,
						transparent 20px,
						white 21px);
				/* border-bottom-left-radius: 10px; */
				/* clip-path: polygon(100% 100%, 100% 10%, 0 100%); */
				/* box-shadow: -10px -10px 0 10px white; */
				z-index: 1;
			}

			/* 圆弧动画 */
			.option-item::before,
			.option-item::after {
				/* opacity: 0;
				transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
				transform: scale(0.5); */
			}

			.option-item.selected::before,
			.option-item.selected::after {
				/* opacity: 1;
				transform: scale(1); */
			}
		</style>
	</head>
	<body>
		<div class="option-container">
			<div class="option-item" onclick="selectOption(this)">
				<h3>西瓜/蜜瓜</h3>
				<p>新鲜当季水果</p>
			</div>
			<div class="option-item selected" onclick="selectOption(this)">
				<h3>鲜花/绿植</h3>
				<p>多种花卉选择</p>
			</div>
			<div class="option-item" onclick="selectOption(this)">
				<h3>桃李枣杏</h3>
				<p>传统水果精选</p>
			</div>
		</div>


		<script>
			function selectOption(element) {
				document.querySelectorAll('.option-item').forEach(item => {
					item.classList.remove('selected');
				});
				element.classList.add('selected');
			}
		</script>
	</body>
</html>
